<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas画图</title>
	<!-- <link rel="stylesheet" type="text/css" href="../css/iconfont.css"> -->
	<style>
	*{
		padding: 0;
		margin:0;
	}
	.main{
		width:600px;
		height: 700px;
		margin:0 auto;
		border:1px solid green;
		position: relative;
		overflow: hidden;
		/*border-left: 1px solid green;
		border-right: 1px solid green;*/
		
	}
	.main img{
		transform: scale(0.5,0.5) translate(-400px,0px);
		border:1px solid green;
	}
	.main .text{
		border:1px solid green;
		width:500px;
		height: 300px;
		margin:0px auto;
		text-indent: 2em;
		
	}
	.frame{
		width: 1300px;
		height:700px;
		/*float:left;*/
		border:1px solid black;

		position: absolute;
		left:0px;
	}
	.one {
		width:600px;
		height:700px;
		border:1px red solid ;
		/*position: absolute;*/
		float:left;
	}
	.two {
		width:600px;
		height:700px;
		border:1px green solid;
		/*position: absolute;*/
		/*float:right;*/
		float:left;

	}
	
	canvas{
		display:block;
		margin:0 auto;
		border-bottom:2px solid black;
		transform:translate(20px,0px);
		/*transition: transform;*/
		/*transform-style: preserve-3d;*/
	}



	</style>
</head>
<body>
	<div class="header">
	<canvas id="mycanvas" width="250px" height="40px"></canvas>
	<!-- <i class="iconfont">&#xe62a;</i> -->
	</div>
	<div class="main">
		<div class="frame">
			<div class="one">
			<img src="../pic/1.jpg">
			<div class="text">
			<p>两只手紧紧抓住，就忘掉你是吗,者被围的人生，只有奄奄一息过，那个真正的我才会诞生。</p>
			<p>这黄妙的人生。</p>
			</div>
		    </div>
			<div class="two">
			<img src="../pic/1.jpg">
			<div class="text">
			<p>两只手紧紧抓住，就忘掉你是吗,者被围的人生，只有奄奄一息过，那个真正的我才会诞生。</p>
			<p>这黄妙的人生。......</p>
			</div>
			</div>
		</div>
	</div>
	
</body>
<script type="text/javascript" src="../js/618header.js"></script>
<script type="text/javascript">
	
	var main = document.querySelector(".main");
	var frame = document.querySelector(".frame");
	// console.log(frame);
	
	//让头部自动转动
	// window.onload = function(){
	var x=0;
	function a (){	
		x++;
		mycanvas.style.transform="rotateY("+x+"deg)";
		
		
	}
	var int = setInterval('a()',100);
	// main.addEventListener("click",int);
	// mycanvas.onClick = clearInterval(int);
	function move(offest){
	var newleft = parseInt(frame.style.left)+offest;
	frame.style.left = newleft+'px';
	if(newleft<-600){
	      frame.style.left=0+'px';
	}

		
	
	setInterval('move(-600)',2000);
	// move();
	// console.log(frame.style.left);
	// var movetime = setInterval('move(-600)',2000);
	

  // }

	
	
</script>
</html>